<template>
  <div class="user-info active" @click="userClick()">
    <div class="user-avatar">
      <image
        v-if="isLogged && userInfo.avatar"
        class="img"
        :src="userInfo.avatar"
        mode="aspectFill"
      />
      <div v-else class="user-empty i-carbon-user-avatar-filled"></div>
    </div>
    <div class="account" v-if="isLogged">
      <div class="name" v-if="userInfo.nickname">{{ userInfo.nickname }}</div>
      <div class="name" v-else>微信用户</div>
      <div class="type" v-if="userInfo.userType === -1">
        <image src="./images/user.png" mode="aspectFill" />
        普通会员
      </div>
      <div class="type vip" v-if="userInfo.userType === 1">
        <image src="./images/vip.png" mode="aspectFill" />
        艺术家
      </div>
      <div class="type vip" v-if="userInfo.userType === 2">
        <image src="./images/vip.png" mode="aspectFill" />
        推广大使
      </div>
    </div>
    <div class="account" v-else>
      <div class="name">立即登录</div>
    </div>
    <span class="i-carbon-chevron-right icon"></span>
  </div>

  <div class="user-vip-info" v-if="isLogged && userInfo.userType === 1">
    <div class="item">
      <div class="num">66</div>
      <div class="text">关注</div>
    </div>
    <div class="border"></div>
    <div class="item">
      <div class="num">89</div>
      <div class="text">粉丝</div>
    </div>
    <div class="border"></div>
    <div class="item">
      <div class="num">3</div>
      <div class="text">收藏</div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { storeToRefs } from 'pinia'
import { to } from '@/utils/page'
import { useUserStore } from '@/store/index'
defineOptions({ name: 'UserInfo' })

const userStore = useUserStore()
const { userInfo, isLogged } = storeToRefs(userStore)

function userClick() {
  if (isLogged.value) {
    to('/pages/my/user-info')
  } else {
    userStore.setShowModal(true)
  }
}
</script>
<style lang="scss" scoped>
.user-info {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  .user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 130rpx;
    height: 130rpx;
    border-radius: 50%;
    image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }
    .user-empty {
      font-size: 110rpx;
      color: var(--bgc1);
    }
  }
  .account {
    flex: 1;
    width: 0;
    padding: 20rpx;
    .name {
      font-size: 34rpx;
      font-weight: 600;
      line-height: 40rpx;
      color: var(--color1);
    }
    .type {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      height: 46rpx;
      padding: 0 14rpx;
      margin-top: 8rpx;
      font-size: 23rpx;
      color: var(--color4);
      background: linear-gradient(147.8deg, rgba(202, 202, 204, 1) 0%, rgba(236, 236, 236, 1) 100%);
      border-radius: 23rpx;
      image {
        width: 30rpx;
        height: 30rpx;
        margin-right: 8rpx;
      }
      &.vip {
        color: #fff;
        background: linear-gradient(
          135deg,
          rgba(143, 103, 232, 0.8) 0%,
          rgba(99, 87, 204, 0.8) 100%
        );
      }
    }
  }
  .icon {
    font-size: 30rpx;
    color: var(--color4);
  }
}
.user-vip-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  margin-top: 20rpx;
  .item {
    flex: 1;
    text-align: center;
    .num {
      font-size: 34rpx;
      font-weight: 600;
      line-height: 40rpx;
      color: var(--color1);
    }
    .text {
      margin-top: 8rpx;
      font-size: 27rpx;
      color: var(--color4);
    }
  }
  .border {
    width: 1px;
    height: 38rpx;
    margin: 0 50rpx;
    background-color: #c7c7c7;
    transform: scaleX(0.5);
  }
}
</style>
